🎯 目標

• 說明 Claude Code（Vibe Coding）是什麼
• 如何設定、使用，以及在這個專案裡扮演的角色
• 建立「工作流程」：自己構思 → AI 協助 → 自己修改/測試 → 紀錄
• 完成專案架構的初始設置與規劃

📝 1. Claude Code（Vibe Coding）簡介

Claude Code 是一個 AI Pair Programming 助手，可以幫我產生程式碼、重構、Debug、寫測試。之前我用過 Cursor 這類 IDE 內建 AI 的工具，不過這次我想嘗試 Claude Code。它的特色是 Vibe Coding 模式，整個介面像是結對程式設計：我輸入需求，Claude 會提出修改建議或直接生成程式碼，過程比單純貼程式碼到 Chat 更自然。

這次挑戰的重點之一，就是想實驗 AI 到底能幫我完成多少全端專案。所以每天的文章，我會分成三段來紀錄：

1. 我的需求/問題（用自然語言寫出來）
2. Claude Code 給的程式碼或建議
3. 我的修改/心得（AI 雖然厲害，但還需要人腦判斷 & Debug）

📝 2. 使用方式

首先是訂閱與安裝 Claude Code，步驟很簡單，可參考官方文件：

👉 https://docs.anthropic.com/en/docs/claude-code/overview

我建立專案架構時，參考了這支影片：

👉 https://www.youtube.com/watch?v=8Q1bRZaHH24&t=9s

只要輸入專案說明，Claude Code 就會自動生成初始架構：

連接Github等設置

到這裡，初步的專案環境就完成了，接下來我也請 Claude 幫我擬定了開發計劃，明天會開始逐步實作。

以下是他幫我做的規劃：

📋 Implementation Phases

Phase 1 – Core Infrastructure & Setup

• Initialize Node.js/Express environment
• Set up database schema (users, rehab tasks, progress, comments, surgery records)
• Implement authentication (JWT, password hashing) and role-based access control

Phase 2 – Core API Development

• User management APIs (register, login, profiles)
• Rehab schedule APIs (CRUD tasks, calendar integration, assignment)
• Progress tracking APIs (check-ins, history retrieval)

Phase 3 – Role-Specific Features

• Patient: daily schedule, check-ins, notes, progress visualization
• Physiotherapist: patient management, schedule creation, feedback system
• Doctor: surgery records, annotations, dashboards, recovery monitoring

Phase 4 – Calendar & Frontend

• Calendar view with filters and timeline-based progress display
• React frontend setup with responsive, role-based UI
• Real-time notifications & updates

Phase 5 – Advanced Features & Polish

• Data analytics (trends, milestones, reports)
• Notifications (email/SMS, in-app alerts)
• Security & performance improvements (encryption, rate limiting, audits)

🏗️ Suggested Tech Stack

• Backend: Node.js + Express, MongoDB (Mongoose), JWT, Socket.io
• Frontend: React, Context API/Redux, FullCalendar.js, Tailwind/MUI, Axios

🎯 Key Priorities

1. Security first – authentication & role-based access
2. Scalable architecture – clear separation of concerns
3. User experience – calendar interface as the core interaction
4. Data integrity – reliable progress tracking
5. Real-time updates – live sync across roles

📊 Success Metrics

• Each role can perform its intended functions
• Secure, isolated access for different roles
• Fast calendar rendering & smooth data retrieval
• Intuitive UI for patients, physiotherapists, and doctors
• Robust error handling & reliable performance

📝 3. 小結

Day2 的任務就是「準備日」：完成 Claude Code 的設定，建立初始專案架構，並制定開發流程。明天開始，我會正式進入開發，第一步會從 系統架構設計 與 資料庫開始。

專案Github Repo : https://github.com/CHING-WENLAI1031/Rehab_Tracker